<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="40%"
    append-to-body
    :close-on-click-modal="false"
    :lock-scroll="false"
    :show-close="false"
    top="40px"
  >
    <el-form ref="pageForm" label-width="80px">
      <el-form-item label="栏目名称">
        <el-input v-model="name" placeholder="请输入栏目名称" />
      </el-form-item>
      <!-- 添加更多表单项 -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="savePage">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUser } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示隐藏
      name: "", //
    };
  },
  methods: {
    visible() {
      this.dialogVisible = true;
    },

    hidden() {
      this.dialogVisible = false;
    },

    async addFirstPage() {
      if (!this.name) {
        return this.$message.error("请输入栏目名称");
      }
      const userInfo = getUser();

      const { code } = await this.$fetch.post(
        "/api/directory/create",
        {
          name: this.name,
          level: 1,
          creator: userInfo.account,
        },
        "post"
      );
      if (code === 0) {
        this.$emit("update");
        this.$message.success("成功");
      }
    },

    savePage() {
      this.addFirstPage();
      this.dialogVisible = false;
      this.name = "";
    },
  },
};
</script>
